<template>
  <div class="user">
    <div style="display: flex; margin: 30px 0px">
      <a-form-item label="发件人">
        <a-input aria-placeholder="请输入发件人" style="width: 300px" />
      </a-form-item>
      <a-form-item label="收件人">
        <a-input aria-placeholder="请输入收件人" style="width: 300px" />
      </a-form-item>
      <a-form-item label="角色">
        <a-cascader
          v-model:value="value"
          :options="options"
          placeholder=""
          style="width: 100px"
        />
      </a-form-item>

      <a-form-item label="状态">
        <a-cascader
          v-model:value="valueone"
          :options="optionsone"
          placeholder=""
          style="width: 100px"
        />
      </a-form-item>
    </div>
    <div style="margin: 10px 90%; display: flex">
      <a-button type="primary">搜索</a-button>
      <a-button style="margin: 0px 10px">重置</a-button>
    </div>
    <div class="top">
      <reload-outlined />
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :row-selection="rowSelection"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import type { CascaderProps } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
const columns = [
  {
    title: '账户',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '邮箱',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '角色',
    dataIndex: 'address',
    key: 'age'
  },
  {
    title: '状态',
    dataIndex: 'address',

    key: 'address'
  },
  {
    title: '注册日期',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: '操作',
    dataIndex: 'address',
    key: 'address'
  }
]
interface DataItem {
  key: number
  name: string
  age: number
  address: string
  children?: DataItem[]
}
const data: DataItem[] = [
  // {
  //   key: 1,
  //   name: 'John Brown sr.',
  //   age: 60,
  //   address: 'New York No. 1 Lake Park',
  //   children: [
  //     {
  //       key: 11,
  //       name: 'John Brown',
  //       age: 42,
  //       address: 'New York No. 2 Lake Park',
  //     },
  //     {
  //       key: 12,
  //       name: 'John Brown jr.',
  //       age: 30,
  //       address: 'New York No. 3 Lake Park',
  //       children: [
  //         {
  //           key: 121,
  //           name: 'Jimmy Brown',
  //           age: 16,
  //           address: 'New York No. 3 Lake Park',
  //         },
  //       ],
  //     },
  //     {
  //       key: 13,
  //       name: 'Jim Green sr.',
  //       age: 72,
  //       address: 'London No. 1 Lake Park',
  //       children: [
  //         {
  //           key: 131,
  //           name: 'Jim Green',
  //           age: 42,
  //           address: 'London No. 2 Lake Park',
  //           children: [
  //             {
  //               key: 1311,
  //               name: 'Jim Green jr.',
  //               age: 25,
  //               address: 'London No. 3 Lake Park',
  //             },
  //             {
  //               key: 1312,
  //               name: 'Jimmy Green sr.',
  //               age: 18,
  //               address: 'London No. 4 Lake Park',
  //             },
  //           ],
  //         },
  //       ],
  //     },
  //   ],
  // },
  // {
  //   key: 2,
  //   name: 'Joe Black',
  //   age: 32,
  //   address: 'Sidney No. 1 Lake Park',
  // },
]
const rowSelection = ref({
  // checkStrictly: false,
  onChange: (
    selectedRowKeys: (string | number)[],
    selectedRows: DataItem[]
  ) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows)
  }
})
const options: CascaderProps['options'] = [
  {
    value: '管理员',
    label: '管理员'
  },
  {
    value: '访客',
    label: '访客'
  }
]
const optionsone: CascaderProps['options'] = [
  {
    value: '可用',
    label: '可用'
  },
  {
    value: '锁定',
    label: '锁定'
  }
]
export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    return {
      value: ref<string[]>([]),
      valueone: ref<string[]>([]),
      options,
      optionsone,
      data,
      columns,
      rowSelection
    }
  }
})
</script>

<style>
.user {
  width: 100%;
  height: 100%;
}
.ant-row {
  margin-left: 30px;
}
</style>
